<template>
	<view>
		<view class="product" v-for="(item, index) in obj" :key="index">
			<view class="pro_top">
				<view class="pro_left">
					<image :src="item.logo" mode="scaleToFill" />
				</view>
				<view class="pro_right">
					<view class="pro_title">
						<span class="pro_name">
							{{ item.name }}
							<view class="pro_des" v-if="item.des">{{ item.des }}</view>
						</span>
					</view>
					<view class="pro_main">
						<span class="pro_num">{{ item.quota_max * 10000 }}</span>
						<span class="pro_text">最高可借&nbsp;&nbsp;(元)</span>
						<view class="check headle" @click="detail(item)">一键申请</view>
					</view>
				</view>
			</view>
			<view class="pro_bom">
				<view class="pro_bom1">
					<view class="bom_first">
						最低年利率
						<span class="blue_text">{{ item.rate }}%</span>
					</view>
					<view>最长借款期限：{{ item.term_max }}个月</view>
				</view>
				<view class="text-color">
					今日已申请
					<span>{{ item.apply_num }}</span>
					%
				</view>
				<!-- <u-line-progress active-color="#0780FE" :show-percent="false" height="8rpx" inactive-color="#D8D8D8" percent="80" class="line"></u-line-progress> -->
			</view>
			<view class="bottom_line"></view>
		</view>
	</view>
</template>

<script>
import ajax from '@/api'
export default {
	components: {},
	props: {
		obj: {
			type: Array,
			default() {
				return []
			}
		}
	},
	data() {
		return {}
	},
	computed: {},
	watch: {},
	onLoad() {},
	onShow() {
		console.log(this.row)
	},
	onReady() {},
	// 方法集合
	methods: {
		async detail(item) {
			try {
				const result = await ajax.apply({
					identification: item.identification
				})
				console.log(result)
			} catch (error) {
				console.log(error)
			}
		}
	},
	onHide() {},
	onUnload() {}
}
</script>

<style lang="scss">
.product {
	padding: 34rpx 0rpx 38rpx 0rpx;
	width: 686rpx;
	height: 252rpx;
	background: #ffffff;
	opacity: 1;
	border-radius: 16px;
	box-sizing: border-box;
	margin-bottom: 24rpx;
	position: relative;
	margin: 0 auto;
	.bottom_line {
		position: absolute;
		width: 100vw;
		height: 2rpx;
		background: #f3f3f3;
		bottom: 0;
		left: -34rpx;
	}
	.pro_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.pro_left {
			width: 96rpx;
			height: 96rpx;
			// background: #3478f2;
			border-radius: 16rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.pro_right {
			width: 574rpx;
			.pro_title {
				align-items: center;
				.pro_name {
					height: 50rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					position: relative;
				}
				.pro_des {
					width: 196rpx;

					height: 42rpx;
					background-color: rgba(255, 229, 172, 0.5);
					border-radius: 8rpx;
					margin-left: 16rpx;
					color: #af8f5e;
					font-size: 24rpx;
					text-align: center;
					line-height: 42rpx;
					border-radius: 22px 22px 22px 0px;
					position: absolute;
					top: -21rpx;
					right: -212rpx;
				}
			}
			.pro_main {
				display: flex;
				justify-content: space-between;
				height: 74rpx;
				width: 100%;
				align-items: center;
				.pro_num {
					height: 74rpx;
					font-size: 52rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #3478f2;
					margin-right: 24rpx;
				}
				.pro_text {
					display: inline-block;
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #bdbdbb;
					text-align: center;
					opacity: 1;
				}
				.check {
					width: 164rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #ffffff;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					background: linear-gradient(180deg, #faca26 0%, #fe6747 100%);
					border-radius: 50rpx;
					border: none;
					text-align: center;
				}
			}
		}
	}
	.pro_bom {
		display: flex;
		justify-content: space-between;
		margin-top: 28rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #bdbdbb;
		position: relative;
		.pro_bom1 {
			display: flex;
			letter-spacing: 1rpx;
			.bom_first {
				border-right: 2rpx solid #dddcde;
				padding-right: 8rpx;
				margin-right: 10rpx;
				.blue_text {
					font-size: 24rpx;
					font-weight: 400;
					color: #0780fe;
				}
			}
		}
		.text-color {
			font-size: 24rpx;
			font-weight: 400;
			color: #0780fe;
			margin-right: 0rpx;
		}
	}
	.line {
		position: absolute;
		width: 152rpx;
		height: 8rpx;
		top: -20rpx;
		right: 0;
	}
}
</style>
